<template>
	<view class="content">
		<!-- 顶部的搜索显示 -->
		<view class="search-bar">
			<view class="search-content" @tap="toSearch">
				<uni-icons type="search" size="20"></uni-icons>
				<view class="placeholder">想租什么，搜一搜</view>
			</view>
		</view>
		<view class="scroll-container">
			<!-- 左侧 -->
			<scroll-view scroll-y="true" class="scroll-left">
				<view v-for="(item, index) in cateList" :key="item.id" v-show="item.sub.length"
					:class="['left-title', index === active ? 'active' : '']" @tap="changeCate(index)">
					{{ item.name }}
				</view>
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view scroll-y="true" class="scroll-right" :scroll-top="scrollTop">
				<view class="top-img" style="width: 100%; height: 12vh; border-radius: 20rpx; overflow: hidden;">
					<image :src="cateList[active].image" mode="" style="width: 100%; height: 100%;"></image>
				</view>
				<view class="brand">
					<view class="brand-item" v-for="(item, index) in cateList[active].sub" :key="item.id"
						@click="toGoodsList(item)">
						<image :src="item.image" lazy-load="true"></image>
						<view style="text-align: center; font-size: 25rpx;">{{ item.name }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				active: 0,
				scrollTop: 0,
				cateList: [],
				jumpUrl: 51,
			}
		},
		onLoad(options) {
			this.getCateList();
			if (options.jumpUrl) {
				this.jumpUrl = options.jumpUrl;
			}
		},
		methods: {
			// 获取分类列表
			// 双重for循环拼接baseImg
			getCateList() {
				uni.$http.get('/Wechat/Goods/getCategory').then(res => {
					// 一级分类
					for (let i in res.data.data) {
						res.data.data[i].image = getApp().globalData.baseImg + res.data.data[i].image
						// 二级分类
						for (let index in res.data.data[i].sub) {
							res.data.data[i].sub[index].image = getApp().globalData.baseImg + res.data.data[i].sub[
								index].image
						}
					}
					this.cateList = res.data.data;
					this.active = this.cateList.findIndex(item => item.id === this.jumpUrl * 1);
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pagesB/search/search'
				})
			},
			changeCate(index) {
				this.active = index
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},
			toGoodsList(i) {
				uni.navigateTo({
					url: `/pagesA/category/goods/goodsList/goodsList?id=${i.id}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	//小程序需要实现商品样式
	.cp-goods-select-goods__item {
		padding: 30upx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 4px;
		font-size: 14px;
		color: #262626;
		margin-bottom: 40rpx;

		.sub-info {
			font-size: 12px;
			color: #84898f;
		}
	}

	.content {
		height: 100vh;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.item {
		padding: 10upx 30upx;
		background-color: #fff;
		margin: 0 10upx;
		margin-bottom: 10upx;
	}

	.num {
		border-radius: 50%;
		background-color: #ff0099;
		color: #fff;
		display: inline-block;
		width: 30upx;
		height: 30upx;
		line-height: 30upx;
		text-align: center;
		padding: 2px;
		position: absolute;
		top: 4px;
	}

	.search-bar {
		width: 100vw;
		height: 7vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-content {
		width: 95vw;
		height: 5vh;
		display: flex;
		padding: 0 10rpx;
		justify-content: start;
		align-items: center;
		box-sizing: border-box;
		border-radius: 2vh;
		background-color: #fff;
	}

	.placeholder {
		margin-left: 20rpx;
		font-size: 25rpx;
		color: #8f8f94;
		margin-top: -4rpx;
		display: block;
	}

	.scroll-container {
		display: flex;
		height: 93vh;
	}

	.scroll-left {
		height: 100%;
		width: 40%;
	}

	.left-title {
		color: #8f8f94;
		font-size: 28rpx;
		line-height: 3rem;
		text-align: center;
	}

	.scroll-right {
		height: 100%;
		padding: 1vh;
		box-sizing: border-box;
		background-color: #fff;
	}

	.active {
		color: #000000;
		background-color: #fff;
		position: relative;

		&:before {
			left: 0;
			position: absolute;
			content: '';
			height: 100%;
			width: 2px;
			background-color: #ff0000;
		}
	}

	.brand {
		padding: 1vh;
		display: flex;
		flex-wrap: wrap;
	}

	.brand-item {
		width: 33.3%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.brand-item image {
		width: 170rpx;
		height: 170rpx;
		display: block;
	}
</style>
